<template>
    <div v-loading="loading" style="width: 100%;">
        <SavePage :title="`${typeName}内容`">
            <template slot="buttons">
                <BaseButton :loading="submitLoading" @click="submit()">保存</BaseButton>
            </template>
            <template slot="body">
                <TitleTips title="基础信息" :required="true" />
                <el-form ref="form" :model="form" class="size-auto" :rules="rules" :inline="true" size="medium" label-width="72px">
                    <el-row :gutter="24">
                        <el-col :span="8">
                            <el-form-item label="标题" prop="title">
                                <el-input v-model.trim="form.title" maxlength="50" show-word-limit clearable placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="作业范围">
                                <el-input v-model.trim="form.constructRange" maxlength="50" show-word-limit clearable placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="实施对象" class="margin-r-0">
                                <el-input v-model.trim="form.object" maxlength="50" show-word-limit clearable placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="内容" class="margin-r-0 block-item">
                                <el-input v-model.trim="form.content" type="textarea" maxlength="200" show-word-limit :rows="4" placeholder="请输入内容" />
                            </el-form-item>
                        </el-col>
                    </el-row>             
                </el-form>
            </template>
        </SavePage>
    </div>
</template>

<script>
import { StandartModel } from '@/models' 

export default {
    name: 'StandardAddOrEdit',
    data() {
        return {
            model: new StandartModel(),
            form: {},
            rules: {
                title: [{ required: true, message: '请填写标题', trigger: 'blur' }]
            },
            type: 'add',
            id: null,
            loading: false,
            submitLoading: false,
            typeName: '新建'
        }
    },
    created() {
        this.getQuery()
        this.id && this.getDetail()
    },
    methods: {
        getQuery() {
            this.type = this.$route.query.type
            if (this.type === 'edit') {
                this.typeName = '编辑'
                this.loading = true
                this.id = this.$route.query.id
            }
        },
        getDetail() {
            this.model.detail({ id: this.id }).then(res => {
                this.form = res
            }).finally(() => {
                this.loading = false
            })
        },
        submit() {
            this.submitLoading = true
            this.$refs['form'].validate(valid => {
                if (valid) {
                    this.model.saveOrUpdate(this.form).then(() => {
                        this.$message({
                            type: 'success',
                            message: this.type === 'edit' ? '修改成功！' : '新建成功！',
                            duration: 500,
                            onClose: () => {
                                this.$router.go(-1)
                            }
                        })
                    }).finally(() => {
                        this.submitLoading = false
                    })
                } else {
                    this.submitLoading = false
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>

</style>
